// Name:                       Badge
//
// Description:                Define style for badges
//
// Component:                `.am-badge`
//
// Modifiers:                `.am-badge-primary`
//                           `.am-badge-secondary`
//                           `.am-badge-success`
//                           `.am-badge-warning`
//                           `.am-badge-danger`
//
// =============================================================================

/* ==========================================================================
   Component: Badge
 ============================================================================ */

.@{ns}badge {
    display: inline-block;
    min-width: 10px;
    padding: 0.25em 0.625em;
    font-size: @font-size-xs;
    font-weight: @badge-font-weight;
    color: @badge-color;
    line-height: @badge-line-height;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    background-color: @badge-bg;
    border-radius: @badge-border-radius;
    &:empty {
        display: none;
    }
    &.@{ns}square {
        border-radius: 0;
    }
    &.@{ns}radius {
        border-radius: @radius-normal;
    }
    &.@{ns}round {
        border-radius: @global-rounded;
    }
    .hook-badge;
}

// link badge
a.@{ns}badge {
    &:hover, &:focus {
        color: @badge-link-hover-color;
        text-decoration: none;
        cursor: pointer;
    }
}

// Color modifier
// =============================================================================
.@{ns}badge-primary {
    background-color: @badge-primary-bg;
    .hook-badge-primary;
}

.@{ns}badge-secondary {
    background-color: @badge-secondary-bg;
    .hook-badge-secondary;
}

.@{ns}badge-success {
    background-color: @badge-success-bg;
    .hook-badge-success;
}

.@{ns}badge-warning {
    background-color: @badge-warning-bg;
    .hook-badge-warning;
}

.@{ns}badge-danger {
    background-color: @badge-danger-bg;
    .hook-badge-danger;
}

// Hooks
// =============================================================================
.hook-badge() {}

.hook-badge-primary() {}

.hook-badge-secondary() {}

.hook-badge-success() {}

.hook-badge-warning() {}

.hook-badge-danger() {}
